<template>
  <div style="background-color: #f3f1f1">
	<div class="bg-color-white">
		
		<div class="u-pt-5">
			<div class="search u-pb-10">
			  <div class="search-width">
				<u-search :show-action="false" :clearabled="true" :placeholder="placeholderText" v-model="searchStr" @search="SearchCommodity"></u-search>
			  </div>
			</div>
			<div class="notification-content" v-for="(item, index) in CommodityList" @click="SelectCommodity(item)">
			  <div class="box">
				<div class="u-flex">
					<div class="u-mr-10">
					  <u-avatar :src="item.CommodityPicture.split(',')[0]" size="110"></u-avatar>
					</div>
					<div class="u-flex-1 u-mr-10">
					  <div class="u-title" style="display: flex">
						  <span class="u-pr-5">{{item.CommodityName}}</span>
					  </div>
					  <div>
						<div class="aui-tag" v-for="(item1, index1) in item.KeyWord.split(',')">
							<u-tag
								:key="index1"
								:text="item1"
								type="info"
								mode="dark"
								size="mini"
							></u-tag>
						</div>
					  </div>
					</div>
				 </div>
				<!-- <div class="u-mb-10 u-pt-5">
				  <u-row gutter="16">
					<u-col span="3">
					  <view>
						商品编号
					  </view>
					</u-col>
					<u-col span="9">
					  <view class="color-blue">
						<span class="u-pr-10">{{item.CommodityNo}}</span>
					  </view>
					</u-col>
				  </u-row>
				</div>
				<div class="u-mb-10">
				  <u-row gutter="16">
					<u-col span="3">
					  <view>
						商品状态
					  </view>
					</u-col>
					<u-col span="9">
					  <view class="color-blue">
						{{item.CommodityStatus}}
					  </view>
					</u-col>
				  </u-row>
				</div> -->
				<div class="u-mb-10 u-pt-5">
				  <u-row gutter="16">
					<u-col span="3">
					  <view>
						上架时间
					  </view>
					</u-col>
					<u-col span="9">
					  <view class="color-blue">
						{{item.WF_DocCreated}}
					  </view>
					</u-col>
				  </u-row>
				</div>
			  </div>
			</div>
		</div>
	
	</div>
  </div>
</template>

<script>
export default {
  data() {
	return {
		placeholderText: '请输入关键字,搜索拍档好物',
		searchStr: '',
		CommodityList: [],
		pageNum: 1,
		pageSize: 10,
	}
  },
  
  onLoad(options) {
  	  
    // 未登录跳转到登录页面
    var loginRes = this.checkLogin();
    if (!loginRes) {
      return false;
    }  	
  	
  	// 获取拍档好物列表
  	this.getGoodCommodityList();
	
  },
  
  onPullDownRefresh() {
  	ithis.pageNum = 1
  	this.getGoodCommodityList()
  	
  	// 停止Loading
  	uni.stopPullDownRefresh();
  },
  
  // 触底分页
  onReachBottom() {
  	this.pageNum += 1
  	this.getGoodCommodityList()
  },
  
  methods: {
  	  /**
  	   * 获取拍档好物列表
  	   */
  	  async getGoodCommodityList(){
  		  const userInfo = uni.getStorageSync('userInfo')
  		  let result = await this.$u.api.unifyRequest({
  			userId: userInfo.userId,
  			nickName: userInfo.nickName,
  			appid: 'GroupPurchase',
  			wf_num: 'R_GroupPurchase_BL001',
			searchStr: this.searchStr,
			pageNum: this.pageNum,
			pageSize: this.pageSize,
  			loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
  		  });
  		  if(result.code == 200){
  			this.CommodityList = result.data
  		  }
  	  },
	  
	  /**
  	   * 搜索商品
  	   */
  	  async SearchCommodity(){
		  this.pageNum = 1
  		  const userInfo = uni.getStorageSync('userInfo')
  		  let result = await this.$u.api.unifyRequest({
  			userId: userInfo.userId,
  			nickName: userInfo.nickName,
  			appid: 'GroupPurchase',
  			wf_num: 'R_GroupPurchase_BL001',
			searchStr: this.searchStr,
			pageNum: this.pageNum,
			pageSize: this.pageSize,
  			loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
  		  });
  		  if(result.code == 200){
  			this.CommodityList = result.data
  		  }
  	  },
	  
	  
	  /**
	   * 选中商品
	   */
	  async SelectCommodity(item){
		  uni.$emit("saveCommodityObj", item);
		  this.goBack();
	  },
  },
};
</script>

<style lang="scss" scoped>
	
	.bg-color-white{
		background-color: white;
	}
	
	.search {
	  width: 100%;
	  text-align: left;
	  // padding-left: 5%;
	  background-color: #fff;
	}
	
	.search-width {
	  width: 95%;
	  margin: 0 auto;
	}
	
	.notification-content {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	.box {
	    width: 100%;
	    padding-left: 5%;
	    padding-right: 5%;
	    position: relative;
	    background-color: #ffffff;
	    padding-top: 20rpx;
	    padding-bottom: 20rpx;
	    border-bottom: 1rpx #e5e5e5 solid;
	}
	
	.color-blue {
	  color: #1989fa;
	}
	
	.aui-tag {
		display:inline
	}
	
</style>